<template>
    <view class="Use auto m-top24">
        <view class="Use-Slect">
            <titleBox title="立即使用"></titleBox>
            <view class="Use-Slect-box">
                <view class="SlectLi" @click="current = index" v-for="(item, index) in deliverys" :key="index">
                    <view class="SlectLi_box" :class="{ Active: current === index }">
                        <view class="iconfont icon-xuanzhong white size28"></view>
                    </view>
                    <text class="black size28">{{ item.title }}</text>
                </view>
            </view>
        </view>

        <view class="Code" v-if="current === 0">
            <text class="color_99 size26">请店员使用商户端扫码付款</text>
            <image :src="headImg" class="Code-Img"></image>
            <text class="color_33 size34 m-top20">JTY1234523</text>
        </view>

        <view class="Address" v-if="current === 1">
            <text class="color_33 size28">收货地址</text>
            <view class="Address-default">
                <image :src="headImg" mode="aspectFill" class="headImg"></image>
                <view class="flex-1 d-flex f-column m-right10">
                    <text class="ellipsis color_33 h6">重庆市渝中区中山二路港天大厦A座6-05</text>
                    <text class="black size30 bold">港天大厦A座6-05</text>
                    <view class="d-flex a-center">
                        <text class="color_33 h6">桑云涛</text>
                        <text class="color_33 h6 m-left20">13412345698</text>
                    </view>
                </view>
                <view class="iconfont icon-xiangyouxiayiye color_33 size28"></view>
            </view>

            <view class="Address-Shop">
                <text class="color_33 size28">配送门店</text>
                <view class="toggleShop">切换门店</view>
            </view>
            <view class="defaulShop">
                <text class="flex-1 black size30">宏达喜糖批发部</text>
                <text class="color_99 size26">3.7KM</text>
            </view>
            <view class="defaulShop">
                <text class="flex-1 color_99 size26">重庆市江北区福利杨洋国际</text>
                <view class="navigation">
                    <view class="iconfont icon-wodeluxian color_33 h6s"></view>
                </view>
            </view>
            <view class="createOrder">生成订单</view>
        </view>
    </view>
</template>

<script>
    import titleBox from '@/subCard/components/titleBox.vue'
    export default {
        components: {
            titleBox
        },
        data() {
            return {
                deliverys: [
                    {
                        title: '门店自提'
                    },
                    {
                        title: '快递上门'
                    }
                ],
                current: 0,
                headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG'
            }
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .Use {
        width: 690rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        padding: 36rpx 20rpx 30rpx;
        &-Slect {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        &-Slect-box {
            display: flex;
            align-items: center;
            .SlectLi {
                display: flex;
                align-items: center;
                margin-left: 20rpx;
                .SlectLi_box {
                    width: 34rpx;
                    height: 34rpx;
                    border: 1rpx solid #d2d2d2;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10rpx;
                }
                .Active {
                    background-color: var(--color);
                    border: 1rpx solid var(--color);
                }
            }
        }

        .Code {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-top: 30rpx;
            &-Img {
                width: 360rpx;
                height: 360rpx;
                margin-top: 24rpx;
                display: block;
            }
        }

        .Address {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-top: 30rpx;
            &-default {
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 24rpx;
                .headImg {
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
            }
            &-Shop {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 30rpx;
                .toggleShop {
                    padding: 4rpx 20rpx;
                    background-color: var(--color);
                    color: #ffffff;
                    font-size: 26rpx;
                    border-radius: 30rpx;
                }
            }
            .defaulShop {
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 20rpx;
                .navigation {
                    width: 40rpx;
                    height: 40rpx;
                    background-color: #f8f8f8;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .createOrder {
                width: 340rpx;
                height: 76rpx;
                border: 1rpx solid var(--color);
                margin: 30rpx auto 10rpx;
                border-radius: 10rpx;
                color: var(--color);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
            }
        }
    }
</style>
